<template>
  <div class="app-container">
    <h2 style="text-align: center;">发布新课程</h2>
    <el-steps :active="2" finish-status="success" process-status="wait" align-center	>
      <el-step title="编辑课程基本信息"></el-step>
      <el-step title="编辑课程大纲"></el-step>
      <el-step title="发布课程"></el-step>
    </el-steps>

    <el-form  label-width="80px" class="form" >
<!-- Form -->
     <el-button type="primary" @click="addVs">添加章节</el-button>


      <el-form-item>
            <el-tree :data="ChapterVideoList" :props="defaultProps"   accordion>

              <span class="custom-tree-node" slot-scope="{ node, data }">
                      <span>{{ node.label }}</span>
                      <span>
                        <el-button
                          type="text"
                          size="mini"
                          v-if="node.parent.parent==null"
                          @click="() => append(node,data)">
                          添加小节
                        </el-button>
                        <el-button
                          type="text"
                          size="mini"
                          @click="() => update(node, data)">
                          修改
                        </el-button>
                        <el-button
                          type="text"
                          size="mini"
                          @click="() => remove(node, data)">
                          {{node.parent.parent==null?"删除章节":"删除小节"}}
                        </el-button>
                      </span>
                    </span>
            </el-tree>
      </el-form-item>
      <el-form-item>
         <el-button style="margin-top: 12px;" @click="lastStep">上一步</el-button>
          <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
       </el-form-item>

    </el-form>

    <el-dialog title="添加章节" :visible.sync="dialogFormVisible">
      <el-form :model="chapterList">
        <el-form-item label="章节" :label-width="formLabelWidth">
          <el-input v-model="chapterList.title" placeholder="添加章节" clearable></el-input>
        </el-form-item>
        <el-form-item label="排序" :label-width="formLabelWidth">
          <el-input-number v-model="chapterList.sort" ></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addChapters" >确 定</el-button>
      </div>
      </el-dialog>
      <el-dialog title="添加小节" :visible.sync="dialogFormVideo">
          <el-form :model="videolist" :label-width="formLabelWidth">
              <el-form-item label="添加标题" >
                <el-input v-model="videolist.title" placeholder="添加章节" clearable></el-input>
              </el-form-item>

              <el-form-item label="排序" >
                <el-input-number v-model="videolist.sort" :min="0"></el-input-number>
              </el-form-item>
              <el-form-item label="是否收费" >
                <el-radio-group v-model="videolist.isFree">
                  <el-radio :label="true">免费</el-radio>
                  <el-radio :label="false">默认</el-radio>
                </el-radio-group>
               </el-form-item>
              <el-form-item label="上传视频" >
                 <el-upload
                   class="upload-demo"
                   :action="urlImg()"
                   :on-success="videosuccess"
                   :on-remove="videoRemove"
                   :before-upload="beforeUploadVideo"
                   :before-remove="beforevideoRemove"
                   :limit="1"
                   accept="multipart/form-data"
                   :file-list="fileList"
                   >
                   <el-button size="small" type="primary">点击上传</el-button>

                 </el-upload>
              </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVideo = false">取 消</el-button>
            <el-button type="primary" @click="addmodifyvideo" >确 定</el-button>
          </div>
      </el-dialog>
  </div>
</template>

<script>
  import {modifyChapter,getChapterById,delChapter,addChapter,getChapterVideoId} from '@/api/course/course.js'
  import {removeVideo,addvideo,delVideo,modifyVideo,getVideo} from '@/api/video/video.js'
  export default {
    data(){
      return {
        fileList:[],
        BASE_API:process.env.BASE_API,
        ChapterVideoList:[],//显示的章节
        defaultProps: {//显示添加
          children: 'children',
          label: 'title'
        },
        chapterList:{
          courseId:this.$route.params.id,
          title:"",
          sort:0
        },//章节
        videolist:{},//小节
        formLabelWidth: '120px',
        dialogFormVisible:false,//添加章节开关
        dialogFormVideo:false,//显示小节开关
        isNaN:true,//切换章节添加和修改
        isVideo:true,//切换小节添加和修改
        isupload:true,//看看上传成功没
      }
    },
    mounted() {
      this.getAllChapterVideo();
    },
    methods:{
      //获取所有的章节和小节
      getAllChapterVideo(){
        getChapterVideoId(this.$route.params.id).then(res=>{
          this.ChapterVideoList=res.data.list

        })
      },
      //上一步
      lastStep(){
        this.$router.push("/course/Info/"+this.$route.params.id)
      },
      //下一步
      next(){
        this.$router.push("/course/publish/"+this.$route.params.id)
      },
      urlImg(){
          return process.env.BASE_API+"/eduoss/video"
      },
      //添加和修改章节
      addChapters(){

        if(this.isNaN){
          addChapter(this.chapterList).then(res=>{
             this.$notify({
              title: '添加成功',
              message: '这是一条成功的提示消息',
              type: 'success'
              });
              this.getAllChapterVideo()

          })
        }else{

           modifyChapter(this.chapterList).then(res=>{
              this.$notify({
               title: '修改成功',
               message: '这是一条成功的提示消息',
               type: 'success'
               });
               this.getAllChapterVideo()

           })
        }

        this.dialogFormVisible = false
      },
      //添加章节的开关
      addVs(){
        this.chapterList={
          courseId:this.$route.params.id,
          title:"",
          sort:0
        },//添加章节
        this.dialogFormVisible = true
        this.isNaN=true
      },
      //添加小节开关
      append(node,data){
        this.videolist={
            courseId:this.$route.params.id,
            chapterId:node.data.id,
            title:"",
            isFree:false,
            sort:0,
            videoOriginalName:"",
            videoSourceId:"",
        }
        this.fileList=[];
        this.dialogFormVideo=true;
        this.isVideo=true;

      },
      //添加和修改小节
      addmodifyvideo(){
        if(!this.isupload){
          this.$message.error('请等视频上传完');
          return
        }
         if(this.isVideo){

            addvideo(this.videolist).then(res=>{
                this.$notify({
                    title: '添加成功',
                    message: '这是一条成功的提示消息',
                    type: 'success'
                })
                this.getAllChapterVideo()
            })
            this.dialogFormVideo=false;
         }else{
            modifyVideo(this.videolist).then(res=>{
              this.$notify({
                  title: '修改成功',
                  message: '这是一条成功的提示消息',
                  type: 'success'
              })
               this.getAllChapterVideo()
            })
             this.dialogFormVideo=false;
         }
      },
      //删除章节和小节
      remove(node,data){
          if(node.parent.parent==null){
            if(node.childNodes.length>0){
              this.$message.error('有字元素不能删除');
            }else{
              delChapter(node.data.id).then(res=>{
                this.$notify({
                 title: '删除成功',
                 message: '这是一条成功的提示消息',
                 type: 'success'
                });
                this.getAllChapterVideo()
              })

            }
          }else{
            delVideo(node.data.id).then(res=>{
                this.$notify({
                 title: '删除成功',
                 message: '这是一条成功的提示消息',
                 type: 'success'
                });
                this.getAllChapterVideo()
            })
          }
      },
      //修改章节和小节的开关
      update(n,d){
        if(n.parent.parent==null){
          getChapterById(n.data.id).then(res=>{
             this.chapterList = res.data.chapter
          })
          this.isNaN=false
          this.dialogFormVisible=true
        }else{

            getVideo(n.data.id).then(res=>{
              this.videolist=res.data.video
            })
            this.fileList=[];
            this.dialogFormVideo=true;
            this.isVideo=false;
        }

      },


      //判断上传文件
      beforeUploadVideo(file) {
          const isLt10M = file.size / 1024 / 1024  < 30;
          if (['video/mp4', 'video/ogg', 'video/flv','video/avi','video/wmv','video/rmvb'].indexOf(file.type) == -1) {
              this.$message.error('请上传正确的视频格式');
              return false;
          }
          if (!isLt10M) {
              this.$message.error('上传视频大小不能超过30MB哦!');
              return false;
          }
          this.isupload=false
      },

      //上传成功
      videosuccess(response, file, fileList){

       this.videolist.videoSourceId = response.data.id
       this.videolist.videoOriginalName = response.data.name
       this.isupload=true
      },
      //确定删除
      videoRemove(){
          removeVideo(this.videolist.videoSourceId).then(res=>{
            this.$notify({
             title: '删除成功',
             message: '这是一条成功的提示消息',
             type: 'success'
            });
            this.fileList=[];
            this.videolist.videoSourceId = ""
            this.videolist.videoOriginalName = ""
          })
      },
      //删除之前
     beforevideoRemove(file, fileList) {
       return this.$confirm(`确定移除 ${ file.name }？`);
     }

    }
  }
</script>

<style scoped>
.form{
  width:80vw;
  margin:1.875rem auto;
}
 .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
